<!-- pages/medicalCard/addMedicalCard.vue -->
<template>
  <view class="add-medical-card-container">
    <uni-nav-bar 
      title="新增就诊卡"
      left-icon="left"
      @clickLeft="navigateBack"
      fixed
      status-bar
    />

    <view class="form-container">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item label="患者ID" required name="patient_id">
          <uni-easyinput v-model="formData.patient_id" placeholder="请输入患者ID" />
        </uni-forms-item>

        <uni-forms-item label="患者姓名" required name="patient_name">
          <uni-easyinput v-model="formData.patient_name" placeholder="请输入患者姓名" />
        </uni-forms-item>

        <uni-forms-item label="性别" required name="patient_gender">
          <uni-data-checkbox v-model="formData.patient_gender" :localdata="genders" />
        </uni-forms-item>

        <uni-forms-item label="年龄" required name="patient_age">
          <uni-easyinput 
            v-model="formData.patient_age" 
            type="number"
            placeholder="请输入患者年龄"
          />
        </uni-forms-item>

        <uni-forms-item label="证件类型" required name="id_type">
          <uni-data-select 
            v-model="formData.id_type"
            :localdata="idTypes"
          />
        </uni-forms-item>

        <uni-forms-item label="证件号码" required name="id_number">
          <uni-easyinput 
            v-model="formData.id_number"
            placeholder="请输入证件号码"
          />
        </uni-forms-item>

        <uni-forms-item label="余额" required name="balance">
          <uni-easyinput 
            v-model="formData.balance" 
            type="number"
            placeholder="请输入就诊卡余额"
          />
        </uni-forms-item>

        <view class="submit-btn">
          <button 
            type="primary" 
            :loading="submitting"
            @click="submitForm"
          >保存</button>
        </view>
      </uni-forms>
    </view>
  </view>
<!--  -->
</template>


<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 表单数据
const formData = reactive({
  patient_id: '',
  patient_name: '',
  patient_gender: '男',
  patient_age: '',
  id_type: '身份证',
  id_number: '',
  balance: 0
});

// 数据字典
const idTypes = ref(['身份证', '护照', '军官证', '其他']);
const genders = ref([
  { value: '男', text: '男' },
  { value: '女', text: '女' }
]);

// 表单验证规则
const rules = reactive({
  patient_id: { rules: [{ required: true, errorMessage: '请输入患者ID' }] },
  patient_name: { rules: [{ required: true, errorMessage: '请输入患者姓名' }] },
  patient_age: {
    rules: [
      { required: true, errorMessage: '请输入患者年龄' },
      { pattern: /^\d+$/, errorMessage: '年龄必须为数字' }
    ]
  },
  id_type: { rules: [{ required: true, errorMessage: '请选择证件类型' }] },
  id_number: { rules: [{ required: true, errorMessage: '请输入证件号码' }] },
  balance: {
    rules: [
      { required: true, errorMessage: '请输入余额' },
      { pattern: /^\d+(\.\d{1,2})?$/, errorMessage: '余额格式不正确' }
    ]
  }
});

// 提交表单
const submitting = ref(false);
const submitForm = async () => {
  try {
    submitting.value = true;
    const response = await uni.request({
      url: '/api/medicalCards', // 替换为实际的API地址
      method: 'POST',
      data: formData
    });
    if (response.statusCode === 201) {
      uni.showToast({ title: '新增成功' });
      uni.navigateBack();
    } else {
      uni.showToast({ title: '新增失败', icon: 'none' });
    }
  } catch (error) {
    uni.showToast({ title: '新增失败', icon: 'none' });
  } finally {
    submitting.value = false;
  }
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.add-medical-card-container {
  padding: 20rpx;
  background-color: #f5f7fb;
  min-height: 100vh;

  .form-container {
    margin-top: 40rpx;

    .submit-btn {
      margin: 40rpx;
      text-align: center;

      button {
        border-radius: 50rpx;
      }
    }
  }
}

::v-deep .uni-forms-item__label {
  font-weight: bold !important;
  color: #333 !important;
}
</style>
